<template>
  <div class="container transac-monitor-submit pb">
    <p class="bread">
      <a href="#/personalcenter">个人中心</a> >
      <a href="#/personalcenter/law" class="font-s-18">订单管理</a> >
      <a href="javascript:void(0);" class="font-s-16">法律服务</a>
    </p>
    <div class="bg-c-fff box-border">
      <h3 class="tm-title">法律服务</h3>
      <step :stepData="stepData" :stepNum="stepNum"></step>
    </div>
    <div class="content box-border fix bg-c-fff">
      <h3>选择付款方式
      <span class="flo-right">应付金额：<i>￥290.00元</i></span></h3>
      <div class="box">
        <p>订单号：*************</p>
        <ul class="auto tc">
          <li class="dib rel">
            <input type="radio" name="payment-method" checked="checked" id="yl" @click="paymentShow(1)">
            <label for="yl" class="yl cup"></label>
            <span class="db abs">
              <i class="db" v-show="isChoice===1"></i>
            </span>
          </li>
          <li class="dib rel">
            <input type="radio" name="payment-method" id="wx" @click="paymentShow(2)">
            <label for="wx" class="wx cup"></label>
            <span class="db abs">
              <i class="db" v-show="isChoice===2"></i>
            </span>
          </li>
          <li class="dib rel">
            <input type="radio" name="payment-method" id="ali" @click="paymentShow(3)">
            <label for="ali" class="ali cup"></label>
            <span class="db abs">
              <i class="db"v-show="isChoice===3"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="time-button fix">
        <div class="flo-right">
          <span>剩余时间: {{time}}</span>
          <button class="blue-button db" @click="onSubmit" v-bind:class="{acticve:noClick}">立即付款</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import Step from '../components/Step'
export default {
  components: {
    Step
  },
  data() {
    return {
      stepNum: 0,
      stepData: [{
        name: '确认付款'
      }, {
        name: '监控员绘制流程图'
      }, {
        name: '法律服务监控'
      }, {
        name: '服务评价'
      }],
      isChoice: 1,
      timeData: 5000,
      hour: '',
      minute: '',
      second: '',
      time: '',
      noClick: false
    }
  },
  mounted() {
    this.dataTime()
  },
  methods: {
    paymentShow(index) {
      this.isChoice = index
      return
    },
    dataTime() {
      var timeFun = setInterval(() => {
        this.timeData--
          var hover = parseInt(this.timeData / 3600)
        var minute = parseInt((this.timeData - hover * 3600) / 60)
        var second = parseInt(this.timeData % 3600 % 60)
        this.time = hover + ' 时 ' + minute + ' 分 ' + second + ' 秒'
        if (this.timeData < 1) {
          clearInterval(timeFun)
          this.time = '0 时 0 分 0 秒'
          this.noClick = true
        }
      }, 1000)
    },
    onSubmit() {
      if (this.timeData < 1) {
        this.$toasted.show('订单已过期,请重新下单！')
      }
    }
  }

}
</script>
<style type="text/css" scoped>
.box-border {
  border: 1px solid #ddd;
}

.tm-title {
  line-height: 40px;
  padding-left: 35px;
  font-size: 14px;
  color: #282828;
  border-bottom: 1px solid #ddd;
}

.pb {
  padding-bottom: 143px;
}

.content h3 {
  color: #a5a5a5;
  line-height: 40px;
  font-size: 14px;
}

.content h3,
.content .box {
  padding: 0 40px;
  color: #a5a5a5;
  border-bottom: 1px solid #dddddd;
}

.content h3 span i {
  color: #ec1818;
  font-size: 18px;
}

.content .box p {
  line-height: 37px;
}

.content .box li {
  margin: 0 15px 35px 15px;
}

.content .box li input {
  opacity: 0;
  filter: alpha(opacity=0);
}

.content .box li label {
  box-shadow: -1px -1px 18px #f0f2fa;
  width: 300px;
  height: 120px;
  display: block;
}

.yl {
  background: url(../assets/cxk.jpg) center no-repeat;
}

.wx {
  background: url(../assets/wx.jpg) center no-repeat;
}

.ali {
  background: url(../assets/ali.jpg) center no-repeat;
}

.content {
  margin-top: 20px;
}

.content .box li span,
.content .box li i {
  border-radius: 100%;
}

.content .box li span {
  left: 15px;
  top: 68px;
  border: 1px solid #989898;
  width: 20px;
  height: 20px;
}

.content .box li i {
  width: 14px;
  height: 14px;
  background-color: #282828;
  margin-top: 2px;
  margin-left: 2px;
}

.time-button {
  padding: 13px 40px 13px 0;
  color: #a5a5a5;
}

.time-button button {
  width: 160px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  margin-left: 20px;
}

.time-button button.acticve {
  background-color: #ddd;
  border-color: #ddd;
}
</style>
